<template>
    <view
        class="message-image"
        @longpress="showControl"
        @tap.stop="handlePreviewImage"
        ref="mes_content"
    >
		<image
			:src="imageInfo.url"
			:style="{ height: imageHeight, width: imageWidth }"
			class="img"
			:class="['content-' + message.flow]"
		></image>
    </view>
</template>

<script lang="ts">
import { defineComponent, watchEffect, reactive, ref, toRefs } from 'vue';
import { wait } from '@/utils/utils'

export default defineComponent({
    props: {
        data: {
            type: Object,
            default: () => {
                return {};
            },
        },
        messageData: {
            type: Object,
            default: () => {
                return {};
            },
        },
        keyboardHeight: {
            type: Number,
            default: () => {
                return 0;
            },
        },
    },
    setup(props: any, ctx: any) {
		const mes_content = ref();
		
        const data = reactive({
            imageInfo: {} as any,
            imageHeight: '0',
            imageWidth: '0',
            message: {} as any,
        });

        watchEffect(() => {
            // 等比例计算图片的 width、height
            const DEFAULT_MAX_SIZE = 170;
            let imageWidth = 0;
            let imageHeight = 0;
            data.message = props.messageData;
            data.imageInfo = props.data.info[1];
            if (data.imageInfo.width >= data.imageInfo.height) {
                imageWidth = DEFAULT_MAX_SIZE;
                imageHeight =
                    (DEFAULT_MAX_SIZE * data.imageInfo.height) /
                    data.imageInfo.width;
            } else {
                imageWidth =
                    (DEFAULT_MAX_SIZE * data.imageInfo.width) /
                    data.imageInfo.height;
                imageHeight = DEFAULT_MAX_SIZE;
            }

            // const imgHeight = data.imageInfo.height >= 140 ?  140 : data.imageInfo.height;
            // const imgWidth = imgHeight * data.imageInfo.width / data.imageInfo.height
            data.imageWidth = imageWidth + "px";
            data.imageHeight = imageHeight + "px";
        });

        const stopPop = (e:any)=>{
            e.preventDefault();
            e.stopPropagation();
        }

        

        // todo 优化 查看大图重新加载图片
        const handlePreviewImage = async (e:any) => {
            e.preventDefault();
            e.stopPropagation();
            uni.hideKeyboard();
			//ctx.emit('previewImage',props.messageData.payload.imageInfoArray?.[2].url);
			/*
			uni.previewImage({
				urls: [props.data.info[0].url],
				// #ifdef APP-PLUS
				indicator: 'number',
				// #endif
			});
			*/
            let refPos = null;
			
			if(props.keyboardHeight){
				await wait(300);
			}
            await new Promise((callback) => {
				const dom = uni.requireNativePlugin('dom')
                //const dom = weex.requireModule("dom");
                dom.getComponentRect(mes_content.value, (e:any) => {
                    refPos = e.size;
                    callback(e);
                });
            });
            const param = {
                startInfo:[refPos],
                //data: refPos, //图片的初始大小与位置
                //url: props.data.info[0].url, //当前图片地址
                index:0,
                urls: [props.data.info[0].url], //预览集合图片地址
            };
			
            //uni.$emit('previewImage',param);
			ctx.emit('previewImage',param);

            // uni.previewImage({
            //     current: props.data.info[0].url,
            //     // 当前显示图片的http链接
            //     urls: [props.data.info[0].url],
            // });
        };
        const showControl = async (e:any) => {
            e.preventDefault();
            e.stopPropagation();
            let refPos = null;
            await new Promise((callback) => {
				const dom = uni.requireNativePlugin('dom')
                //const dom = weex.requireModule("dom");
                dom.getComponentRect(mes_content.value, (e) => {
                    refPos = e.size;
                    callback(e);
                });
            });
            const obj = {
                refPos,
                message: data.message,
            };
            uni.$emit('longPressLock')
            uni.$emit("showControl", obj);
        };

        return {
            ...toRefs(data),
            handlePreviewImage,
            showControl,
            mes_content,
            stopPop,
        };
    },
});
</script>
<style lang="scss" scoped>
.message-image {
    position: relative;
}
.content {
    &-in {
        border-radius: 6px;
    }
    &-out {
        border-radius: 6px;
    }
}
</style>
